<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/view/jsp/base.jsp"%>
<html lang="en">
<style>
.gradeA {
	cursor: pointer !important;
}

.widget-box tr td {
	text-align: left;
}

.mytable {
	border: 1px solid #ddd;
	background-color: transparent;
	border-collapse: collapse;
	border-spacing: 0;
}

.mytable th {
	border: 0px solid #ddd;
	padding: 8px;
	text-align: center;
}

.mytable tr {
	border: 1px solid #ddd;
}

.mytable td {
	padding: 8px;
	text-align: center;
}

.text16 {
	width: 60px;
	height: 40px;
	text-align: left;
}

.text32 {
	width: 120px;
	height: 40px;
	text-align: left;
}

.text64 {
	width: 200px;
	height: 40px;
	text-align: left;
}
</style>
<body>
	<div id="content">
		<div id="content-header"></div>
		<div class="container-fluid">
			<div class="">
				<div class="">
					<h5>服务节点列表</h5>
				</div>
				<form id="appMgrQueryForm" action="" method="post"
					class="form-horizontal">
					<div class+"" style="font-size: 15px; padding: 15px 5px 5px 5px;">
						<label style="display: inline">服务节点:</label> <input
							primaryKey="true" type="text" class="text32" name="node"
							onkeydown="enterQuery()" placeholder="如:testnode" size="16"
							maxlength="32"> &nbsp;&nbsp;&nbsp;
						<label style="display: inline">有效标记:</label> <input
							primaryKey="true" type="text" class="text32" name="invalid"
							onkeydown="enterQuery()" placeholder="如:0" size="16"
							maxlength="32"> &nbsp;&nbsp;&nbsp;
						<label style="display: inline">地址:</label> <input
							primaryKey="true" type="text" class="text32" name="hosts"
							onkeydown="enterQuery()" placeholder="如:127.0.0.1" size="16"
							maxlength="32"> &nbsp;&nbsp;&nbsp;
						<button id="filter" type="button" class="btn btn-info"
							style="margin-bottom: 5px; padding: 2px 5px;" onclick="query()">&nbsp;&nbsp;&nbsp;过&nbsp;滤&nbsp;&nbsp;&nbsp;</button>
					</div>
				</form>


				<table id="appMgrTable" url="" class="mytable ">
					<thead>
						<tr role="row">
							<th class="ui-state-default" role="columnheader" style=""
								name="node" primaryKey="true">节点名</th>
							<th class="ui-state-default" role="columnheader" style=""
								name="invalid">有效标记</th>
							<th class="ui-state-default" role="columnheader" style=""
								name="hosts">地址列表</th>
							<th class="ui-state-default" role="columnheader" style=""
								name="work-box">操作 <a href="#" onclick="addNewRow()">&nbsp;&nbsp;&nbsp;&nbsp;<span
									class="glyphicon glyphicon-plus"></span></a>
							</th>
						</tr>
						<tr id="editRow" role="row" style="display: none;">
							<td><input class="text32"
								style="overflow-x: visible; overflow-y: visible;" type="text"
								name="node" readonly size="16" maxlength="32"></td>

							<td><select style="width: 70px; height: 30px;"
								name="invalid">
									<option value="0">有效</option>
									<option value="1">无效</option>
							</select></td>
							<td>
								<table id="edit-table">
									<thead>
										<tr>
											<th class="ui-state-default" role="columnheader" style=""
												name="ip" primaryKey="true">地址</th>
											<th class="ui-state-default" role="columnheader" style=""
												name="port" primaryKey="true">端口号</th>
											<th class="ui-state-default" role="columnheader" style=""
												name="edit-work-box">操作 <a href="#"
												onclick="addNewHostRow($(this))">&nbsp;&nbsp;&nbsp;&nbsp;<span
													class="glyphicon glyphicon-plus"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;
											</th>
										</tr>

										<tr role="row" id="addHostRow" style="display: none;">
										
											<td><input class="text32"
												style="overflow-x: visible; overflow-y: visible;"
												type="text" name="ip" size="16" maxlength="30"></td>
											<td><input class="text32"
												style="overflow-x: visible; overflow-y: visible;"
												type="text" name="port" size="16" maxlength="20">
												</td>
											<td class="center "><a href="#"
												onclick="saveHostAdd($(this))"><span
													class="glyphicon glyphicon-saved"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;
												<a href="#" onclick="rmHostRow($(this))"><span
													class="glyphicon glyphicon-remove"></span></a></td>
													
										</tr>
									</thead>
									<tbody id="edit-tbody" role="alert" aria-live="polite"
										aria-relevant="all"></tbody>
								</table>
							</td>
							<td class="center "><a href="#" onclick="saveEdit($(this))"><span
									class="glyphicon glyphicon-saved"></span></a>
								&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" onclick="query()"><span
									class="glyphicon glyphicon-remove"></span></a></td>
						</tr>
						<tr role="row" id="addRow" style="display: none;">
							<td><input class="text32"
								style="overflow-x: visible; overflow-y: visible;" type="text"
								name="node" size="16" maxlength="32"></td>
							<td><select style="width: 70px; height: 30px;"
								name="invalid">
									<option value="0">有效</option>
									<option value="1">无效</option>
							</select></td>
							<td class="center "><a href="#" onclick="saveAdd($(this))""><span
									class="glyphicon glyphicon-saved"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;
								<a href="#" onclick="rmRow($(this))"><span
									class="glyphicon glyphicon-remove"></span></a></td>
						</tr>
					</thead>
					<tbody id="appMgrTable-tbody" role="alert" aria-live="polite"
						aria-relevant="all">

					</tbody>
				</table>
				<p id="errorInfo" style="display: none; color:red; font-size:10px; " ></p>
				<div style="float: left;">
					<span style="width: 70px; height: 40px; margin: 2px 0 0 4px;">每页</span>
					<select id="pageSize"
						style="width: 65px; height: 26px; margin: 2px 0 0 4px;"
						onchange="query()">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="5">5</option>
						<option value="10" selected="true">10</option>
					</select> <span style="width: 65px; height: 30px;">条</span>
				</div>
				<div id="_paging" style="float: right; margin: 2px 5px 2px 4px;"
					class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers">
				</div>

			</div>
		</div>
	</div>
	<div id="modelDialog" class="modal fade"
		style="display: block; height: 180px;">
		<div class="modal-header">
			<a class="close" data-dismiss="modal">x</a>
			<h4>操作提示</h4>
		</div>
		<div class="modal-body">
			<h4>确认删除该项记录吗？</h4>
		</div>
		<div class="modal-footer">
			<button id="confirm" type="button" class="btn btn-success">确认</button>
			<button type="button" class="btn btn-info" data-dismiss="modal">取消</button>

		</div>
	</div>
</body>
<script type="text/javascript">		

var hostsQJ=[];
var nodesQJ=[];

$(document).ready(function(){
	query();
})	

function query(){
	removeErrInfo();
	$("#appMgrQueryForm").attr("action","<%=path%>/nodeMgr/getNodeMgrList")
	$("#appMgrQueryForm").ajaxSubmit(function(text){																															
	    if(text.success){																																								
	    	var _data = text.data;
	    	nodesQJ=_data;
			var _ths = [];      //标题行
			var _primaryKey = [] ;  //唯一索引字段				
			var arrTr = $("#appMgrTable").find("thead:first tr:first th");
			arrTr.each(function(){
				var $this = $(this);
				_ths.push($this.attr("name"));
				if($this.attr("primaryKey")=="true"){
					_primaryKey.push($this.attr("name")) ;
				}
			});
 		    var pageSize = $("#pageSize").val();
			var tbody = loadData(_data,_ths,_primaryKey, pageSize);
			var $tby = $("#appMgrTable-tbody");
			$tby.html(tbody);
		}
	});
}

function loadData(data,_ths,_primaryKey, pageSize){
	var tbody = "";
 	var loopTimes;
	if(pageSize<=data.length){
		loopTimes=pageSize;
	}else{
		loopTimes=data.length;
	}
	for(var i=0;i<loopTimes;i++){
		var tr = '<tr class="gradeA ">';
		for(var index in _ths){
							if(_ths[index]!="work-box"){
								var td_text = ((data[i][_ths[index]]==null)?"":data[i][_ths[index]]);
								if(_ths[index]=="invalid"){
									if(td_text=="0"){
										tr+='<td class=" " name = "'+ _ths[index]+'">' + '有效' +'</td>';
									}else{
										tr+='<td class=" " name = "'+ _ths[index]+'">' + '无效' +'</td>';
									}
								}else{
									tr+='<td class=" " name = "'+ _ths[index]+'">' + td_text +'</td>';
								}
								
								
							}else if(_ths[index]=="work-box"){
								tr+='<td class="center" name= "'+ _ths[index]+'">'
								tr+='<a href="#" onclick="edit($(this))"><span class="glyphicon glyphicon-pencil"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="deleteNode($(this))"><span><span class="glyphicon glyphicon-remove"></span></span></a>';
								tr+='<form action="" method="post">';
								for(var key in _primaryKey){
									tr+='<input type="hidden" name="'+ _primaryKey[key] +'" value="'+ data[i][_primaryKey[key]] +'"/>';
								}
								tr+='</form>';
								tr+='</td>';
							}
						}
				 '</tr>' ;
		 tbody+=tr;	 
	}
	return tbody ;
}

function enterQuery(){
	var event = window.event || arguments.callee.caller.arguments[0];
	if(event.keyCode == 13){
		query();
	}
}

//点击编辑按钮，数据被克隆到编辑框
function edit(_this){
	var copytr=$("#editRow");//可编辑行
	var this_tr = _this.parent().parent();//当前行
	var tr_data = {};//用于存当前行显示数据
	var selector = {valid:"有效", invalid:"无效"};
	this_tr.find("td").each(function(){//将当前数据封装成json格式
		tr_data[$(this).attr("name")] = $(this).text();
	});
 	this_tr.html(copytr.html());//当前行内容替换成可编辑行内容
 	
 		this_tr.find("select").each(function(){//用前面封装好的数据填充当前行
 	 		var _this = $(this);
 			var td_name = _this.attr("name");
 			if(td_name){
 				
 				if(tr_data[td_name]==selector.invalid){
 					_this.val(1);
 				}
 				
 				if(tr_data[td_name]==selector.valid){
 					_this.val(0);
 				} 
 			} 
 		});
 		
 		this_tr.find("input").each(function(){//用前面封装好的数据填充当前行
 		var _this = $(this);
		var td_name = _this.attr("name");
		if(td_name){
			_this.val(tr_data[td_name]);
		} 
	});
 	this_tr.find("table").each(function(){//用前面封装好的数据填充当前行
 			$(this).attr("id",tr_data["node"]);
 			$(this).find("tbody").each(function(){
 				$(this).attr("id",tr_data["node"]+"_body");
 			});
 			creatForm(tr_data["node"]);
	});
 		
}

	//删除记录																																											
	function deleteNode(_this){																																							
		$("#modelDialog").modal();
	    $("#confirm").unbind('click').click(function(){	
			var $this = $(this);
			var form = _this.siblings("form");																																		
			var _tr = _this.parent().parent();																																			
			var sib = _tr.siblings("tr").length;
			
			//关闭弹出框
			$this.siblings('[data-dismiss="modal"]').trigger('click');
			
	 		$.ajax({																																								
	 				url:"<%=path%>/nodeMgr/deleteNode",																																		
	 				data:form.serialize(),																																				
	 				type:"post",																																						
	 				success:function(text){																																				
							query();																																
	 				}																																									
	 		});				  																																						
		})	
	} 
	
	//保存编辑后的结果
 	function saveEdit(_this){
		
        var $form = $("<form action='' method='post'></form>");	//动态创建一个form表单用来收集数据
		var this_tr = _this.parent().parent();  //获取当前行数据
    	$form.html(this_tr.children().clone(true));  //将当前tr里面的全部内容clone(包含数据)赋予form对象
    	$.ajax({
			url:"<%=path%>/nodeMgr/updateNode",	
			type:"post",
			data:$form.serialize(),
			success:function(result){
				query();
			}
		});
	} 
	
	//保存增加的记录																																									
	function saveAdd(_this){	
		removeErrInfo();
		var $form = $("<form action='' method='post'></form>");	//动态创建一个form表单用来收集数据
		var this_tr = _this.parent().parent();  //获取当前行数据	
		var flag=0;
		$form.html(this_tr.children().clone(true));  //将当前tr里面的全部内容clone(包含数据)赋予form对象
		var nodeValue;
		$form.find("input").each(function(){
			nodeValue = $(this).val();
		});
		var f=true;
		console.log(nodesQJ);
		console.log(nodeValue);
	 	if(nodesQJ != null){
	 		for(var i=0;i<nodesQJ.length;i++){
				if(nodesQJ[i]["node"] == nodeValue ){
					f=false;
				}
			}
	 	}
		if(f==false){
			addErrInof("服务节点已存在");
			return;
		} 
		
		flag =check(this_tr);
		if(flag==-1){
			return;
		}
		
		//保存																																												
        $.ajax({  
			url:"<%=path%>/nodeMgr/addNode",	
			type:"post",
			data:$form.serialize(),
			success:function(result){
				query();
			}
		});
	}
	
	//点击增加按钮，编辑增加内容
	function  addNewRow(){
		var newRow = $("<tr  role='row' >"+$("#addRow").html()+"</tr>");
		$("#appMgrTable-tbody").append(newRow);
	}

	//点击取消增加
	function rmRow(_this){
		removeErrInfo();
		_this.parent().parent().remove();
	}
<!-- --------------------------------------------------------------------------- -->
	
	function queryHost(text,_ths,_primaryKey){
		var tbody = "";
		    if(text.success){																																								
		    	var data = text.data;
			 	var loopTimes;
					loopTimes=data.length;
				
				for(var i=0;i<loopTimes;i++){
					var tr = '<tr class="gradeA ">';
					for(var index in _ths){
										if(_ths[index]!="edit-work-box"){
											var td_text = ((data[i][_ths[index]]==null)?"":data[i][_ths[index]]);
											tr+='<td class=" " name = "'+ _ths[index]+'">' + td_text +'</td>';
										}else if(_ths[index]=="edit-work-box"){
											tr+='<td class="center" name= "'+ _ths[index]+'">';
											tr+='<a href="#" onclick="deleteHost($(this))"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>';
											tr+='<form action="" method="post">';
											for(var key in _primaryKey){
												tr+='<input type="hidden" name="'+ _primaryKey[key] +'" value="'+ data[i][_primaryKey[key]] +'"/>';
											}
											tr+='</form>';
											tr+='</td>';
										}
									}
						tr+= '</tr>' ;
					 tbody+=tr;	 
				}
				
			}
	return tbody ;
	}
	
	function creatForm(node){	
		var $form = $("<form action='' name='dtcj' method='post'><input name='node' id='host_edit' value='' type='hidden' /></form>");	//动态创建一个form表单用来收集数据
		$("body").append( $form);
		$("#host_edit").val(node);
		//保存																																												
        $.ajax({
			url:"<%=path%>/nodeMgr/getHostMgrList",	
			type:"post",
			data:$form.serialize(),
			success:function(result){
				var _ths=[];
				var _primaryKey=[];
				$("#"+node).find("thead tr th").each(function(){
					var $this = $(this) ;
					_ths.push($this.attr("name"));
					if($this.attr("primaryKey")=="true"){
						
						_primaryKey.push($this.attr("name")) ;
					
					}
				});
				_primaryKey.push("node") ;
				hostsQJ = result.data;
				console.log(hostsQJ);
				console.log(hostsQJ);
				var $tbody = queryHost(result,_ths,_primaryKey);
				$("#"+node+"_body").html($tbody);
				$form.remove();
			}
		});
	}
	
	//删除记录																																											
	function deleteHost(_this){		
		$("#modelDialog").modal();
	    $("#confirm").unbind('click').click(function(){	
			var $this = $(this);
			
			var form = _this.siblings("form");
			var _tr = _this.parent().parent();																																			
			var tr_data;//用于存当前行显示数据
			form.find("input").each(function(){//将当前数据封装成json格式
				if($(this).attr("name")=="node"){
					tr_data=$(this).val();
				}
			});
			//关闭弹出框
			$this.siblings('[data-dismiss="modal"]').trigger('click');
	 		$.ajax({																																								
	 				url:"<%=path%>/nodeMgr/deleteHost",																																		
	 				data:form.serialize(),																																				
	 				type:"post",																																						
	 				success:function(text){			
	 					creatForm(tr_data);																																
	 				}																																									
	 		});																																										
		});	
	} 
	
	
	
	//保存增加的记录																																									
	function saveHostAdd(_this){
		var flag=0;
		var addHostValue=[];
		var addHostName=[];
		var i=0;
		var j=0;
		var this_tr = _this.parent().parent();  //获取当前行数据
		flag = check(this_tr);
		if(flag == -1){
			return;
		}
		var $form = $("<form action='' method='post'><input type='hidden' name = 'node'/></form>");	//动态创建一个form表单用来收集数据
		var node = _this.parent();
		var parent_tr = _this.parent().parent().parent().parent().parent().parent();
		var nodeValue=null;
		parent_tr.find("input").each(function(){
			if($(this).attr("name")=="node" && nodeValue==null){
				nodeValue=$(this).val();
			}
			
		});
		
		$form.append(this_tr.children().clone(true));  //将当前tr里面的全部内容clone(包含数据)赋予form对象
		console.log($form.serialize());
		
		$form.find("input").each(function(){
			if($(this).attr("name")=="node"){
				$(this).attr("value",nodeValue);
			}
			addHostName[i++]=$(this).attr("name");
			addHostValue[j++]=$(this).val();
		});
		
		console.log(addHostValue);
		console.log(hostsQJ);
	 	var f=true;
	 	if(hostsQJ != null){
	 		console.log(hostsQJ);
	 	for(var i=0;i<hostsQJ.length;i++){
			if(hostsQJ[i][addHostName[0]] == addHostValue[0] &&
					hostsQJ[i][addHostName[1]] == addHostValue[1] &&
						hostsQJ[i][addHostName[2]] == addHostValue[2]){
				f=false;
			}
		}
	 	}
	 	console.log(11);
		if(f==false){
			addErrInof("地址已存在");
			return;
		} 
		console.log(22);
		$("#errorInfo").css({'display':'none'});
		//保存																																												
        $.ajax({
			url:"<%=path%>/nodeMgr/addHost",
			type:"post",
			data:$form.serialize(),
			success:function(result){
				creatForm(nodeValue);
			}
		});
	}
	
	//点击增加按钮，编辑增加内容
	function  addNewHostRow(_this){
		var newRow = $("<tr  role='row' >"+$("#addHostRow").html()+"</tr>");
		var table = _this.parent().parent().parent().parent();
		var tbodyId;
		table.find("tbody").each(function(){
			tbodyId = $(this).attr("id");
		});
		$("#"+tbodyId).append(newRow);
	}

	//点击取消增加
	function rmHostRow(_this){
		removeErrInfo();
		_this.parent().parent().remove();
	}
	
	function check(this_tr){
		var flag=0;
		this_tr.find("input").each(function(){
			if(($(this).val()=="" || $(this).val()==null) && flag == 0){
				addErrInof("字段:"+$(this).attr("name")+"为空");
				$(this).css({'border-color':'red'});
				flag=1;
				return;
			}else{
				$(this).css({'border-color':'#ccc'});
			}
			
		});
		if(flag == 1){
			return-1;
		}
	}
	
	function addErrInof(errInfo){
		$("#appMgrTable").width()
		$("#errorInfo").text(errInfo);
		$("#errorInfo").css({'display':'block','margin-left':$("#appMgrTable").width()-200});
	}
	
	function removeErrInfo(){
		$("#errorInfo").text("");
		$("#errorInfo").css({'display':'none'});
	}
	
</script>
</html>

